<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匿名聊天室</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="/socket.io/socket.io.js"></script>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- Login -->
        <div class="login-content" v-if="!flag">
            <div class="login">
                <div class="login-box">
                    <h2>匿名聊天室</h2>
                    <p>欢迎来到随机密聊，祝您聊得开心</p>
                    <p>嗨！陌生人！七分钟交友，尽在随机密聊</p>
                    <div class="info">
                        <div class="username">
                            <span>用户昵称</span>
                            <input type="text" placeholder="输入用户名" v-model.trim="username" />
                        </div>
                        <div class="avatar">
                            <span>上传头像</span>
                            <label for="file" class="upload">{{ uploadfile }}</label>
                            <input type="file" id="file" style="display: none" v-on:change="chooseFile" ref="file" />
                        </div>
                    </div>
                    <!-- 提交按钮 -->
                    <button class="submit" @click="toChatRoom">开始匹配</button>
                </div>
            </div>
        </div>
        <!-- Chat -->
        <div class="chat-content" v-else>
            <div class="chat">
                <!-- 头部 -->
                <div class="chat-header">
                    <span>匿名聊天室 ({{count}})</span>
                </div>
                <!-- 聊天内容 -->
                <div class="chat-text" ref="chatText">
                    <!-- 聊天记录 -->
                    <div v-for="(item,index) of sayData" :key="index">
                        <!-- 说话 -->
                        <div class="user_speak" :class="item.username === username ? 'userRight' : 'userLeft'" v-if="item.state === 2">
                            <!-- 用户头像 -->
                            <img class="user-avatar" :src="item.avatar" alt="" />
                            <!-- 用户发言 -->
                            <div class="userchat" :style="item.username === username ? 'margin-right: 1rem' : 'margin-left: 1rem'">
                                <div class="user-title" :style="item.username === username ? 'text-align: right' : 'text-align: left'">{{item.username}}</div>
                                <div class="speak-text-r" v-html="item.speak" v-if="item.username === username"></div>
                                <div class="speak-text-l" v-html="item.speak" v-else></div>
                            </div>
                        </div>
                        <!-- enter and leave -->
                        <div class="enterOrLeave" v-if="item.state !== 2">
                            <div class="enter" v-if="item.state === 1">
                                <span style="color: skyblue;">{{item.username}}</span>
                                <span>进入了聊天室</span>
                            </div>
                            <div class="leave" v-if="item.state === 0">
                                <span style="color: orange; font-size: 12px;">{{item.username}}</span>
                                <span>离开了聊天室</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部消息发送 -->
                <div class="chat-footer">
                    <!-- 发送图片 -->
                    <div class="send-img">
                        <label for="img_file">
                            <img src="./img/shangchuan.png" style="width: 100%; height: 100%;" />
                        </label>
                        <input type="file" id="img_file" style="display: none" v-on:change="sendImgFile" />
                    </div>
                    <!-- 发送文字 -->
                    <p class="input-text" contenteditable="true" id="input"></p>
                    <!-- 点击发送 -->
                    <img class="send-msg" src="./img/upload.png" alt="" @click="sendMsg">
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            flag: false,
            uploadfile: "点击上传图片",
            avatar: "", // 头像
            username: "", // 用户名
            count: 0, // 当前在线人数
            socket: "",
            sayData: [], // 聊天数据
        },
        methods: {
            // 上传头像
            chooseFile() {
                var img = this.$refs.file.files[0];
                let fr = new FileReader();
                fr.readAsDataURL(img);
                fr.onload = () => {
                    this.uploadfile = img.name;
                    this.avatar = fr.result;
                };
            },
            // 进入聊天室
            toChatRoom() {
                if (/^\s*$/g.test(this.username) || /^\s*$/g.test(this.avatar)) return
                this.socket = io("http://localhost");
                // 当前在线人数
                this.socket.on("count", (data) => {
                    this.count = data;
                });
                // 将用户名及头像发送给服务端
                this.socket.emit("username", this.username);
                this.socket.emit("userAvatar", this.avatar);
                // 监听用户发言
                this.socket.on("userSpeak", (data) => {
                    this.sayData.push(data);
                });
                // 离开房间
                this.socket.on("leaveRoom", (data) => {
                    this.sayData.push(data);
                });
                // 进入房间
                this.socket.on("enterRoom", (data) => {
                    this.sayData.push(data);
                });
                this.flag = true
            },
            // 发送消息
            sendMsg() {
                let speak = input.innerHTML;
                let speak_copy = speak.replace("<div>", "").replace("</div>", "");
                if (!(/^\s*$/g.test(speak_copy) || /^(&nbsp;\s*)*$/g.test(speak_copy))) {
                    this.socket.emit("speak", speak);
                }
                input.innerHTML = "";
            },
            // 发送图片
            sendImgFile() {
                const imgFile = document.getElementById("img_file").files[0];
                let fr = new FileReader();
                fr.readAsDataURL(imgFile);
                fr.onload = () => {
                    let img = document.createElement("img");
                    img.src = fr.result;
                    img.classList.add("inputImage");
                    img.onload = function () {
                        input.appendChild(img);
                    }
                };
            },
            // 聊天页面消息触底
            scrollToBottom() {
                if (this.flag) return this.$refs.chatText.scrollTop = this.$refs.chatText.scrollHeight;
                // if (this.flag) {
                //     let speaks = this.$refs.chatText.children
                //     if (this.sayData.length > 3) return speaks[speaks.length - 1].scrollIntoView(false)
                // }
            },
        },
        mounted() {
            this.scrollToBottom()
        },
        updated() {
            this.scrollToBottom()
        }
    })
</script>

</html>